<template>
  <div class="sub-serve-section">
    <van-tabs
			class="sub-serve-content"
			v-model="active"
			color="#3E9DFD"
			animated
			background="transparent"
		>
      <van-tab :title="`我的子任务(${ownerSubTaskList.length})`">
        <div 
          class="sub-serve-list"
          v-if="ownerSubTaskList.length"
        >
          <div 
						class="sub-serve-item server-common-card"
						v-for="item in ownerSubTaskList"
						:key="item.stId"
            @click="handleShowSubServeDetail(item)"
					>
						<div class="serve-title">
              <span><b>{{item.stName}}</b></span>
              <i :class="['tag',{'green':item.stState==='1'}]">{{item.stState==='1'?'待执行':'已执行'}}</i>
            </div>
						<div class="serve-content">
							<h3><span>任务描述</span></h3>
							<p>{{item.stContent}}</p>
							<h3><span>周期</span></h3>
							<span class="date"><b>{{item.updatetime}}-{{item.updatetime}}</b></span>
              <strong v-if="item.stFinishTime">最近一次执行时间：{{item.stFinishTime}}</strong>
						</div>
					</div>
        </div>
        <van-empty v-else description="我的子任务空空如也" />
      </van-tab>
      <van-tab :title="`他人子任务(${otherSubTaskList.length})`">
        <div 
          class="sub-serve-list"
          v-if="otherSubTaskList.length"
        >
          <div 
						class="sub-serve-item server-common-card"
						v-for="item in otherSubTaskList"
						:key="item.stId"
            @click="handleShowSubServeDetail(item)"
					>
            <div class="serve-title">
              <span><b>{{item.stName}}</b></span>
              <i :class="['tag',{'green':item.stState==='1'}]">{{item.stState==='1'?'待执行':'已执行'}}</i>
            </div>
						<div class="serve-content">
							<h3><span>任务描述</span></h3>
							<p>{{item.stContent}}</p>
              <h3><span>执行人</span></h3>
              <div class="person"><span>{{item.stPerson}}</span></div>
							<h3><span>周期</span></h3>
							<span class="date"><b>{{item.updatetime}}-{{item.updatetime}}</b></span>
              <strong v-if="item.stFinishTime">最近一次执行时间：{{item.stFinishTime}}</strong>
						</div>
					</div>
        </div>
        <van-empty v-else description="他人很懒,没有子任务" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name:"subServe",
  data(){
    return {
      active: 0
    }
  },
	computed:{
		...mapState({
			ownerSubTaskList: state=>state.serve.ownerSubTaskList,
			otherSubTaskList: state=>state.serve.otherSubTaskList,
		})
	},
  methods:{
    handleShowSubServeDetail(item){
      this.$store.commit("serve/setCurrentSubServeInfo",item)
			this.$router.push({
				path:"subServeDetail"
			})
		}
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/style/variable.scss";
.sub-serve-section{
  height: 100%;
	background: $bg-gray;
  .sub-serve-content{
    height: 100%;
		::v-deep .van-tabs__content{
			height: calc(100% - 44px);
			.van-tab__pane{
				height: 100%;
			}
		}
  }
  .sub-serve-list{
    height: 100%;
    padding: 30px;
    overflow: auto;
    .sub-serve-item{
      background: #fff;
      border-radius: 10px;
      padding: 20px 50px 50px;
      margin-bottom: 30px;
      .serve-title{
        @include flexCenter;
        justify-content: space-between;
        .tag{
          font-size: 20px;
          background: #F45656;
          color: #fff;
          padding: 1px 5px;
          border-radius: 4px;
          &.green{
            background: #27BA0F;
          }
        }
      }
    }
  }
}
</style>